<template>
  <app-config-layout>
    <template #title>
      <span>盘口配置</span>
    </template>
    <template #body>
      <div class="handicap_config">
        <el-form :inline="true" class="formtasktype" label-width="104">
          <el-form-item label="游戏类型:" style="width: 100%; margin-bottom: 16px">
            <el-select
              v-model="copyconfig.game_type"
              placeholder="选择游戏类型"
              style="width: 160px; color: #252a30"
            >
              <el-option label="全部" value="all" />
              <el-option label="足球" value="soccer" />
              <el-option label="篮球" value="basketball" />
            </el-select>
          </el-form-item>
          <el-form-item label="事件类型:" style="width: 100%; margin-bottom: 16px">
            <el-select
              v-model="copyconfig.event_type"
              placeholder="选择事件类型"
              style="width: 160px; color: #252a30"
            >
              <el-option label="全部" value="all" />
              <el-option label="早盘" value="early" />
              <el-option label="滚球" value="live" />
            </el-select>
          </el-form-item>
          <el-form-item label="只玩哪些盘口:" style="width: 100%">
            <div class="play_pk_types">
              <div
                class="play_pk_types_item"
                v-for="(item, index) in pkkeylist"
                :style="pktypesstyle(index)"
                :key="index"
              >
                <div class="play_pk_types_label">{{ item.type_name }}</div>
                <div class="play_pk_types_list">
                  <el-row>
                    <el-col
                      class="list_col"
                      :span="8"
                      v-for="(item2, index2) in item.pk_type_obj"
                      :key="index2"
                    >
                      <el-checkbox-group v-model="copyconfig.only_play_pk_types">
                        <el-checkbox :label="item2.label" :value="item2.value" />
                      </el-checkbox-group>
                    </el-col>
                  </el-row>
                </div>

                <div class="all_select">
                  <el-checkbox v-model="item.allselect" label="全选" @change="changeall(item)" />
                </div>
              </div>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </template>
  </app-config-layout>
</template>

<script setup>
import { http } from '@/utils/http'

const props = defineProps({
  copyconfig: Object,
})
const pkkeylist = ref([])
const checkdata = ref([])
const onlyplaypktypes = inject('onlyplaypktypes')

const getpkkeylist = () => {
  http.get('/robot/get_pk_key_data').then(res => {
    res.data.data.forEach(item => {
      item.allselect = []
    })
    pkkeylist.value = res.data.data
  })
}

const pktypesstyle = index => {
  if (index != pkkeylist.value.length - 1) {
    if (index != 0) {
      return 'border-bottom: 1px solid #ebebeb;margin-top: 24px;'
    } else {
      return 'border-bottom: 1px solid #ebebeb;'
    }
  } else {
    return 'margin-top: 24px;'
  }
}

const changeall = item => {
  console.log(item)

  if (item.allselect.length > 0) {
    item.pk_type_obj.forEach(obj => {
      if (!props.copyconfig.only_play_pk_types.includes(obj.value)) {
        props.copyconfig.only_play_pk_types.push(obj.value)
      }
    })
  } else {
    item.pk_type_obj.forEach(obj => {
      const index = props.copyconfig.only_play_pk_types.indexOf(obj.value)
      if (index !== -1) {
        props.copyconfig.only_play_pk_types.splice(index, 1)
      }
    })
  }
}

onMounted(() => {
  getpkkeylist()
})
</script>

<style lang="scss" scoped>
.play_pk_types {
  width: 832px;
  //   height: 338px;
  padding: 24px 16px 0 16px;
  border-radius: 8px;
  border: solid 1px #ebebeb;
  display: flex;
  flex-direction: column;
}
.play_pk_types_item {
  display: flex;
  position: relative;
}
.all_select {
  position: absolute;
  right: 0;
  top: -25px;
}
.play_pk_types_label {
  width: 70px;
  font-family: PingFangSC;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: #252a30;
}
.play_pk_types_list {
  flex: 1;
}
.list_col {
  margin-bottom: 24px;
}

::v-deep .handicap_config .el-form-item__label {
  color: #252a30;
}
::v-deep .list_col .el-checkbox {
  height: auto;
}
::v-deep .list_col .el-checkbox.is-checked .el-checkbox__label {
  font-family: PingFangSC;
  font-size: 14px;
  color: #252a30;
}
</style>